import React from 'react';

const IncomeRanking = ({ rankings, updateTime }) => {
  return (
    <div className="income-ranking-section">
      <div style={{ display: 'flex' }}>
        <h3 className="section-title">收益排行前五</h3>
        <p className="update-time">更新于: {updateTime}</p>
      </div>
      <ul className="ranking-list">
        {rankings.map((item) => (
          <li key={item.name} className="ranking-item">
            <span className={`rank-badge rank-${item.rank}`}>{item.rank}</span>
            <img src={item.avatar} alt={item.name} className="ranking-avatar" />
            <div className="ranking-info">
              <p className="ranking-name">{item.name}</p>
              <p className="ranking-order-count">订单数: {item.orderCount}</p>
            </div>
            <div className="ranking-income">
              <p className="income-value">{item.income}</p>
              <p className="income-rate"><span className="up-arrow">↑</span> {item.incomeRate}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default IncomeRanking;
